<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

    <fmt:setBundle basename="ApplicationResources"/>

    <title><fmt:message key="title.addUser"/></title>

    <script type="text/javascript">
        function getSelectValues(select) {
            var result = [];
            var options = select && select.options;
            var opt;

            for (var i = 0, iLen = options.length; i < iLen; i++) {
                opt = options[i];

                if (opt.selected) {
                    result.push(opt.value || opt.text);
                }
            }
            return result;
        }

        function moveForward() {
            var availableRoles = document.getElementById('sbAvailableRoles');
            var selectedRoles = document.getElementById('sbSelectedRoles');
            var options = getSelectValues(availableRoles);

            for (var i = 0; i < options.length; i++) {
                var option = document.createElement('option');
                option.id = option.value = option.text = options[i];
                selectedRoles.add(option);

                $("#sbAvailableRoles").find("option[value=" + options[i] + "]").remove();
            }
        }

        function moveBackward() {
            var availableRoles = document.getElementById('sbAvailableRoles');
            var selectedRoles = document.getElementById('sbSelectedRoles');
            var options = getSelectValues(selectedRoles);

            if (options.length >= $('#sbSelectedRoles').find('> option').length) {
                alert('User must have at least one role');
                return;
            }

            for (var i = 0; i < options.length; i++) {
                var option = document.createElement('option');
                option.id = option.value = option.text = options[i];
                availableRoles.add(option);

                $("#sbSelectedRoles").find("option[value=" + options[i] + "]").remove();
            }
        }

        $(function () {
            $('#addUserForm').submit(function () {
                $('#sbSelectedRoles option').prop('selected', true);
            });
        });
    </script>
</head>
<body>
<div style="text-align: center">${requestScope.message}</div>
<form id="addUserForm" action="${pageContext.request.contextPath}/controller/addoredituser" method=post>
    <center>
        <table cellpadding=4 cellspacing=2 border=0>
            <tr>
                <td><fmt:message key="label.adduser.id"/></td>
                <td><c:if test="${param['insert'] == 'true'}">
                    <input type="text" name="id" value="${param['id']}" size=15
                           maxlength=20>
                    <input type="hidden" name="ins" value="true"/>
                </c:if>
                    <c:if test="${param['insert']=='false'}">
                        <input type="text" name="id" value="${requestScope.user.id}" size=15
                               maxlength=20 readonly="readonly">
                        <input type="hidden" name="ins" value="false"/>
                    </c:if></td>
            </tr>
            <tr>
                <td><fmt:message key="label.adduser.name"/></td>
                <td><input type="text" name="name"
                           value="${requestScope.user.name}" maxlength=20></td>
            </tr>
            <tr>
                <td><fmt:message key="label.adduser.password"/></td>
                <td><input type="password" name="password"
                           value="${requestScope.user.password}" maxlength=20></td>
            </tr>
            <tr>
                <td><fmt:message key="label.adduser.roles"/></td>
                <td>
                    <table>
                        <tr>
                            <td>
                                <label>
                                    <select style="width: 120px;" id="sbAvailableRoles" name="availableRoles"
                                            multiple="multiple" tabindex="1">
                                        <c:if test="${! empty  requestScope.availableRoles}">

                                            <c:forEach var="roleObject" items="${requestScope.availableRoles}"
                                                       varStatus="status">
                                                <option id="${roleObject.role}"
                                                        value="${roleObject.role}">${roleObject.role}</option>
                                            </c:forEach>
                                        </c:if>
                                    </select>
                                </label>
                            </td>
                            <td style="vertical-align: middle;">
                                <input style="width: 100%;" type="button" onclick="moveForward()" value=">>>>"/>
                                <input style="width: 100%;" type="button" onclick="moveBackward()" value="<<<<"/>
                            </td>
                            <td>
                                <label>
                                    <select style="width: 120px;" id="sbSelectedRoles" name="selectedRoles"
                                            multiple="multiple" tabindex="2">
                                        <c:if test="${! empty  requestScope.user.roles}">

                                            <c:forEach var="roleObject" items="${requestScope.user.roles}"
                                                       varStatus="status">
                                                <<option id="${roleObject.role}" value="${roleObject.role}">${roleObject.role}</option>
                                            </c:forEach>


                                        </c:if>
                                    </select>
                                </label>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="Submit">
                    <input type="reset" value="Reset">
                </td>
            </tr>
        </table>
    </center>

</form>

</body>
</html>